<!--
 * @Descripttion: 设备注册表单
 * @LastEditors: xzh
 * @LastEditTime: 2023-09-23 15:05:49
-->
<template>
  <DileDrawer
    v-model="equipRegisterForm.visible"
    :loading="equipRegisterForm.loading"
    size="40%"
    @sure="hanldeSure"
  >
    <template #header>
      <span>{{
        $t(`table.btnArr.${!equipRegisterForm.formData.id ? "add" : "edit"}`)
      }}</span>
    </template>
    <template #default>
      <el-form
        ref="formRef"
        :model="equipRegisterForm.formData"
        :rules="formRules"
        label-width="7rem"
        size="large"
        status-icon
      >
        <el-form-item
          :label="$t('page.equipManageArr.equipRegisterArr.code')"
          prop="code"
        >
          <el-input
            v-model="equipRegisterForm.formData.code"
            :placeholder="$t('common.enter')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('page.equipManageArr.equipRegisterArr.equipmentSign')"
          prop="equipmentSign"
        >
          <el-input
            v-model="equipRegisterForm.formData.equipmentSign"
            :placeholder="$t('common.enter')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('page.equipManageArr.equipArchivesArr.name')"
          prop="relEquip.name"
        >
          <el-input
            v-model="equipRegisterForm.formData.relEquip.name"
            readonly
            :placeholder="$t('common.select')"
            @click="() => dileSelectItemTableRef.init()"
          />
        </el-form-item>
        <el-form-item :label="$t('page.equipManageArr.equipArchivesArr.code')">
          <el-input
            v-model="equipRegisterForm.formData.relEquip.code"
            disabled
            :placeholder="$t('common.systemAutoBringOut')"
          />
        </el-form-item>
        <el-form-item :label="$t('page.equipManageArr.equipType')">
          <el-input
            v-model="equipRegisterForm.formData.relEquip.extJson.typeName"
            disabled
            :placeholder="$t('common.systemAutoBringOut')"
          />
        </el-form-item>
        <el-form-item :label="$t('page.systemManageArr.position')">
          <el-input
            v-model="equipRegisterForm.formData.relEquip.extJson.positionName"
            disabled
            :placeholder="$t('common.systemAutoBringOut')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('page.equipManageArr.equipRegisterArr.status')"
        >
          <el-radio-group v-model="equipRegisterForm.formData.status">
            <el-radio :label="true">{{ $t("table.btnArr.enable") }}</el-radio>
            <el-radio :label="false">{{
              $t("table.btnArr.disEnable")
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label="$t('page.equipManageArr.equipRegisterArr.plcAddress')"
        >
          <el-input
            v-model="equipRegisterForm.formData.plcAddress"
            :placeholder="$t('common.enter')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('page.equipManageArr.equipRegisterArr.ipcAddress')"
        >
          <el-input
            v-model="equipRegisterForm.formData.ipcAddress"
            :placeholder="$t('common.enter')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('page.equipManageArr.equipRegisterArr.spareIPCAddress')"
        >
          <el-input
            v-model="equipRegisterForm.formData.spareIPCAddress"
            :placeholder="$t('common.enter')"
          />
        </el-form-item>
      </el-form>
    </template>
  </DileDrawer>
  <!-- 选择对象列表 -->
  <DileSelectItemTable
    ref="dileSelectItemTableRef"
    :selectTableType="selectTableTypeEnum.equip"
    :multiple="false"
    @sure="handleEquipSelected"
  />
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, nextTick } from "vue";
import type { object_Inf } from "@/utils/typings/index.type";
import { useI18n } from "vue-i18n";
import { ElNotification } from "element-plus";
import { selectTableTypeEnum } from "@/components/dile-selectItem/index.type";
import DileSelectItemTable from "@/components/dile-selectItem/selectItem-table/index.vue";
import DileDrawer from "@/components/dile-drawer/index.vue";
import Dile_APi from "@/api";

const emit = defineEmits(["refresh"]);

let { t } = useI18n();

/**
 * @Author: xzh
 * @Descripttion: 选择对象表格实例
 * @Param:
 */
let dileSelectItemTableRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 表单实例
 * @Param:
 */
let formRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion: 表单默认数据
 * @Param:
 */
let defaultData = () => ({
  id: 0,
  code: "",
  name: "",
  equipmentSign: "", //设备标识
  equipmentInfoId: null, //设备id
  relEquip: {
    code: "", //设备编码
    name: "", //设备名称
    extJson: {
      typeName: "", //设备类型名称
      positionName: "", //存放位置名称
    },
  },
  status: true, //状态
  plcAddress: "", //PLC地址
  ipcAddress: "", //工控机地址
  spareIPCAddress: "", //备用工控机地址
  extJson: {},
});
/**
 * @Author: xzh
 * @Descripttion: 设备注册表单参数
 * @Param:
 */
let equipRegisterForm = reactive<object_Inf>({
  visible: false,
  loading: false,
  //表单数据
  formData: defaultData(),
});

/**
 * @Author: xzh
 * @Descripttion:表单验证规则
 * @Param:
 * @param {*} computed
 */
let formRules = computed((): any => {
  return reactive({
    code: [
      {
        required: true,
        message:
          t("common.enter") + t("page.equipManageArr.equipRegisterArr.code"),
        trigger: "change",
      },
    ],
    equipmentSign: [
      {
        required: true,
        message:
          t("common.enter") +
          t("page.equipManageArr.equipRegisterArr.equipmentSign"),
        trigger: "change",
      },
    ],
    ["relEquip.name"]: [
      {
        required: true,
        message: t("common.enter") + t("page.equipManageArr.equip"),
        trigger: "change",
      },
    ],
  });
});

/**
 * @Author: xzh
 * @Descripttion:初始化加载
 * @Param:
 * @param {*} id 设备注册主键
 */
let init = async (id: number) => {
  let { visible, loading } = toRefs(equipRegisterForm);
  visible.value = true;
  await nextTick();
  try {
    loading.value = true;
    //加载表单数据
    await initFormData(id);
  } finally {
    loading.value = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 加载表单数据
 * @Param:
 */
let initFormData = async (id: number) => {
  let { model, equipment }: object_Inf = !!id
    ? await Dile_APi.getEquipRegisterInfo(id)
    : { model: defaultData(), equipment: {} };

  Object.assign(equipRegisterForm.formData, {
    ...model,
    relEquip: {
      ...model.relEquip,
      ...equipment,
    },
  });
};
/**
 * @Author: xzh
 * @Descripttion: 设备选中事件
 * @Param:
 * @param {*} equip
 */
let handleEquipSelected = (equipArr: Array<object_Inf>) => {
  let { formData } = toRefs(equipRegisterForm),
    equip: object_Inf = equipArr.find(() => true) || {};
  Object.assign(formData.value, {
    ...formData.value,
    equipmentInfoId: equip.id,
    relEquip: equip,
  });
};

/**
 * @Author: xzh
 * @Descripttion: 保存事件
 * @Param:
 */
let hanldeSure = async () => {
  let { formData, loading, visible } = toRefs(equipRegisterForm),
    valid = await formRef.value.validate();
  if (!valid || !!loading.value) {
    return false;
  }
  try {
    loading.value = true;
    await Dile_APi.saveEquipRegister(formData.value);
    //触发刷新回调
    emit("refresh");
    //提示成功
    ElNotification({
      message: t("common.message.OperationSuccess"),
      type: "success",
    });
    //关闭弹框
    visible.value = false;
  } finally {
    loading.value = false;
  }
};

defineExpose({
  init,
});
</script>
<style lang="scss" scoped></style>
